-@title= 'Colors | Admin Page '
-@page_classes= 'colors'

.container
  %h1 Background Colors Classes
  .col-2.bg-default.text-center
    %h4
      Default Color
  .col-2.bg-primary.text-center
    %h4
      Primary Color
  .col-2.bg-info.text-center
    %h4
      Info Color
  .col-2.bg-success.text-center
    %h4
      Success Color
  .col-2.bg-warning.text-center
    %h4
      Warning Color
  .col-2.col-last.bg-danger.text-center
    %h4
      Danger Color
  %hr.col-12
  %h1 Text Colors Classes
  .col-2.text-default
    %h4
      Default Color
  .col-2.text-primary
    %h4
      Primary Color
  .col-2.text-info
    %h4
      Info Color
  .col-2.text-success
    %h4
      Success Color
  .col-2.text-warning
    %h4
      Warning Color
  .col-2.col-last.text-danger
    %h4
      Danger Color
  %hr.col-12
.col-12
  .panel.panel-danger
    .panel-header
      %h3.panel-title
        Background Colors Classes | Source Code
    .panel-body
      :code
        # lang: html
        <div class='bg-default'>
          <p>
            Default Color
          </p>
        </div>
        <div class='bg-primary'>
          <p>
            Primary Color
          </p>
        </div>
        <div class='bg-info'>
          <p>
            Info Color
          </p>
        </div>
        <div class='bg-success'>
          <p>
            Success Color
          </p>
        </div>
        <div class='bg-warning'>
          <p>
            Warning Color
          </p>
        </div>
        <div class='bg-danger'>
          <p>
            Danger Color
          </p>
        </div>
.col-12
  .panel.panel-danger
    .panel-header
      %h3.panel-title
        Text Colors Classes | Source Code
    .panel-body
      :code
        # lang: html
        <div class='text-default'>
          <h4>
            Default Color
          </h4>
        </div>
        <div class='text-primary'>
          <h4>
            Primary Color
          </h4>
        </div>
        <div class='text-info'>
          <h4>
            Info Color
          </h4>
        </div>
        <div class='text-success'>
          <h4>
            Success Color
          </h4>
        </div>
        <div class='text-warning'>
          <h4>
            Warning Color
          </h4>
        </div>
        <div class='text-danger'>
          <h4>
            Danger Color
          </h4>
        </div>
